<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
     <script>
        document.write('<meta name="viewport" content="width=device-width, initial-scale='+(1/window.devicePixelRatio)+', maximum-scale='+(1/window.devicePixelRatio)+', user-scalable='+(1/window.devicePixelRatio)+'">');
     </script>
    <title>QQ</title>
    <style>
         body,ul,li{
            margin: 0; padding: 0;
        }
        li{
            list-style: none;
        }
        html,body{
            width: 100%;
            height: 100%;
        }
        #wrapper{
            height: 100%;
            display: flex;
            flex-direction: column;
        }
        .header,.nav{
            height: 96px;
            flex-shrink: 0;
            width: 100%;
        }
        .section{
            flex-grow: 1;
            height: 48px;
            overflow-y:auto;
        }
        .bnav,.box{
            display: flex;
            width: 100%;
            height: 96px;
            flex-wrap: wrap;
        }
        .bnav li,.box div{
            width: 96px;
            height: 96px;
            flex-grow: 1;
        }
        .bnav li img,.box div img,.time img{
            width: 100%;
            height: 100%;
            display: block;
            border: 0;
        }
        .time{
            flex-shrink: 0;
            width: 100%;
            height: 74px;
        }
        .mes{
            display: flex;
            align-items: center;
            justify-content: space-around;
            background: #11b7f3;
        }
        .box .mescon{
	        width: 200px;
            height: 39px;
            background: #fff;
            border-radius:18px; 
            font-size: 30px;
            border: 1px solid #fff;
            flex-grow: 0;
        }
        .box .mescon span{
            height: 100%;
            border-radius: 18px;
            display: block;
            float: left;
            text-align: center;
            width: 100px;
        }
        .box .mescon span:nth-of-type(2){
            background: #11b7f3;
        }
        .secon{
            display: flex;
            flex-direction: column;
        }
        .secon li{
            width: 100%;
            flex-grow: 1;
            border-bottom: 1px solid #dedee0;
        }
        .secon li img{
            width: 100%;
            display: block;
            border: 0;
        }
    </style>
</head>
<body>
    <div id=wrapper>
       <header class="time"><img src="img/shouji_01.jpg" alt=""></header>
        <header class="header">
            <div class="box">
                <div><img src="img/QQ_top_02.jpg" alt=""></div>
                <div class="mes">
                   <div class="mescon">
                         <span>消息</span><span>对话</span>
                   </div>
                </div>
                <div><img src="img/QQ_top_04.jpg" alt=""></div>
            </div>
        </header>
        <section class="section">
            <ul class="secon">
                <li><img src="img/QQ_03.jpg" alt=""></li>
                <li><img src="img/QQ_03.jpg" alt=""></li>
                <li><img src="img/QQ_03.jpg" alt=""></li>
                <li><img src="img/QQ_03.jpg" alt=""></li>
                <li><img src="img/QQ_03.jpg" alt=""></li>
                <li><img src="img/QQ_03.jpg" alt=""></li>
                <li><img src="img/QQ_03.jpg" alt=""></li>
                <li><img src="img/QQ_03.jpg" alt=""></li>
                <li><img src="img/QQ_03.jpg" alt=""></li>
                <li><img src="img/QQ_03.jpg" alt=""></li>
                <li><img src="img/QQ_03.jpg" alt=""></li>
                <li><img src="img/QQ_03.jpg" alt=""></li>
                <li><img src="img/QQ_03.jpg" alt=""></li>
                <li><img src="img/QQ_03.jpg" alt=""></li>
                <li><img src="img/QQ_03.jpg" alt=""></li>
                <li><img src="img/QQ_03.jpg" alt=""></li>
                <li><img src="img/QQ_03.jpg" alt=""></li>
                <li><img src="img/QQ_03.jpg" alt=""></li>
                <li><img src="img/QQ_03.jpg" alt=""></li>
                <li><img src="img/QQ_03.jpg" alt=""></li>
            </ul>
        </section>
        <nav class="nav">
            <ul class="bnav">
                <li><img src="img/QQ_nav_02.jpg" alt=""></li>
                <li><img src="img/QQ_nav_03.jpg" alt=""></li>
                <li><img src="img/QQ_nav_04.jpg" alt=""></li>
            </ul>
        </nav>
    </div>
</body>
</html>